<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>38、生命周期(旧)、组件挂载流程</title>
</head>
<body>
  <div id="test"></div>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>

  <script type="text/babel">
    class Demo extends React.Component {
      // 挂载时，1、构造器，一般放在最上方
      constructor(props) {
        console.log('count-constructor')
        super(props)
        // 初始化状态
        this.state = {
          count: 0,
        }
      }
      
      add = () => {
        // 获取原状态
        const {count} = this.state
        // 更新状态
        this.setState({count: count+1})
      }

      // 卸载组件按钮的回调
      death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }

      // 挂载时，2、组件将要挂载的钩子
      componentWillMount() {
        console.log('count-componentWillMount')
      }

      // 挂载时，4、组件挂载完毕的钩子
      componentDidMount() {
        console.log('count-componentDidMount')
      }

      componentWillUnmount() {
        console.log('count-componentWillUnmount')
      }

      // 挂载时，3、render
      render() {
        console.log('count-render')
        const {count} = this.state
        return(
          <div>
            <h2>当前求和为{count}</h2>
            <button onClick={this.add}>点我+1</button>
            <button onClick={this.death}>点我卸载组件</button>
          </div>
        )
      }
    }
    ReactDOM.render(<Demo />, document.getElementById('test'))
  </script>
</body>
</html>